<template>
	<view class="recommend">
		<!-- v-if="shopData.type == 'video'" -->
		<view class="topBox" v-if="shopData.type == 'video'">
			<view class="videoBox">
				<video class="videoClass" autoplay :src="$wanlshop.oss(shopData.content_url)"></video>
			</view>
			<view class="dwShop cf">
				<image v-if="shopData.goods[0]"
					@click="$wanlshop.auth(`/pages/product/goods?id=${shopData.goods[0].id}`)"
					style="width: 288rpx;height: 60rpx;" src="https://img.aibbyp.com/wechat/images/nHome/gwcwz.png"
					mode=""></image>
				<view class="flex_ac mt12">
					<image class="imgAcatar" :src="$wanlshop.oss(shopData.shop.avatar)" mode=""></image>
					<view class="f28 fb ml20">
						{{shopData.shop.shopname}}
					</view>
					<view class="gz f24 ml20" @click="btnGZ">
						{{shopData.follow ? '已关注':'关注'}}
					</view>
				</view>
				<view class="mt16 f28">
					{{shopData.title}}
				</view>

			</view>
			<view class="bottomBox">
				<view class="flex1">

					<view class="flex1">
						<input class="uniInput" v-model="inputValue" placeholder="发表你的看法" confirm-type="send"
							@confirm="btnComment" :border="true" />
					</view>
				</view>
				<view class="ml28 flex_ac">
					<view class="ml26">
						<u-icon @click="btnLike1(0)" name="heart" size="50" v-if="shopData.is_like == 0"></u-icon>
						<u-icon @click="btnLike1(1)" name="heart-fill" size="50" v-if="shopData.is_like == 1"
							color="#FF7030"></u-icon>
					</view>
					<view class="c3d f28 ml12">
						{{shopData.likes}}
					</view>
					<view class="ml32" @click="btnfocus">
						<u-icon name="chat" size="50"></u-icon>
					</view>
					<view class="c3d f28 ml12">
						{{shopData.comments}}
					</view>
				</view>
			</view>

		</view>

		<view class="topBox imgBox" v-if="shopData.type == 'image'">
			<swiper class="swiper" circular indicator-color='#ccc' indicator-active-color='#3065FA'
				:indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
				<swiper-item v-for="(item,indeximg) in shopData.content_url" :key="indeximg"
					@click="previewImage(shopData.content_url,indeximg)">
					<image class="imgSwiper" :src="$wanlshop.oss(item)" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<!-- 图片页面 下面数据 -->
			<view class="bottom">
				<view class="f32 c3 fb">
					<view class="flex_sb">
						<view class="flex1">
							{{shopData.title}}
						</view>
						<view class="gz f24 ml20 cf" @click="btnGZ">
							{{shopData.follow ? '已关注':'关注'}}
						</view>
					</view>
				</view>
				<view class="mt18" v-html="shopData.content">

				</view>

				<!-- 商品信息 -->
				<view class="flex_start goodsBox mt20" v-if="shopData.goods" v-for="(i,l) in shopData.goods" :key="l">
					<view class="" @click="$wanlshop.auth(`/pages/product/goods?id=${shopData.id}`)">
						<image class="goodsImg" :src="$wanlshop.oss(i.image)" mode="">
						</image>
					</view>
					<view class="c3d ml24 flex1" @click="$wanlshop.auth(`/pages/product/goods?id=${shopData.id}`)">
						<view class="overflow_2">
							{{i.title}}
						</view>
						<view class="error tar fb mr20">
							￥{{i.price}}
						</view>
					</view>

				</view>

				<scroll-view :scroll-y="true" class="scoll-viewS flex1 mt12" @scrolltolower="scrolltolower"
					lower-threshold="300" scroll="scroll" style="touch-action: none;">
					<view class="mt24 f32 c6 fb tac">
						共{{shopData.comments}}条评论
					</view>

					<view class="commentsBox mt20">
						<view class="mb20" v-for="(item,iIndex) in commentsData" :key="item.id">
							<view class="">
								<view class="flex_start">
									<image class="img" :src="$wanlshop.oss(item.user.avatar) " mode=""></image>
									<view class="f24 flex1 ml20">
										<view class="info">
											{{item.user.nickname}}
										</view>
										<view class="c3 f14">
											{{item.content}}
										</view>
										<view class="info f20">
											{{item.createtime_text}} {{item.city}}
											<text class="c3 ml8" @click="btnHH(item.id,1)"> 回复</text>
										</view>
									</view>
									<view class="ml32 flex_yy_center mt20">
										<u-icon @click="btnLike(item.id,iIndex,1,'father')" name="heart-fill"
											color="#FF2A2A" v-if="item.is_like == 1"></u-icon>
										<u-icon @click="btnLike(item.id,iIndex,0,'father')" name="heart"
											v-if="item.is_like == 0"></u-icon>
										<view class="f20 info">
											{{item.likes}}
										</view>
									</view>

								</view>
								<view class="ml55 mt20 mb20" v-for="(data,index) in item.children" :key="index">
									<view class="flex_start">
										<image class="img" :src="$wanlshop.oss(data.user.avatar) " mode=""></image>
										<view class="f24 flex1 ml20">
											<view class="info">
												{{data.user.nickname}}
											</view>
											<view class="c3 f14">
												<text class="info f20 mr12" v-if="data.top_nickname">
													回复给&nbsp;{{data.top_nickname}}</text>
												{{data.content}}
											</view>
											<view class="info f20">
												{{data.createtime_text}} {{data.city}}
												<text class="c3 ml8" @click="btnHH(data.id,1)"> 回复 </text>
											</view>
										</view>
										<view class="ml32 flex_yy_center mt20">
											<u-icon @click="btnLike(data.id,index,1,'son',iIndex)" name="heart-fill"
												color="#FF2A2A" v-if="data.is_like == 1"></u-icon>
											<u-icon @click="btnLike(data.id,index,0,'son',iIndex)" name="heart"
												v-if="data.is_like == 0"></u-icon>
											<view class="f20 info">
												{{data.likes}}
											</view>
										</view>

									</view>

								</view>
							</view>
						</view>
					</view>

					<view class="f24 info tac" v-if="!scrollType">
						没有更多数据了
					</view>
				</scroll-view>

			</view>
			<!-- 最下面发表看法 -->
			<view class="bottomBox">
				<view class="flex1">
					<input class="uniInput" :focus='focus1' v-model="inputValue" placeholder="发表你的看法"
						confirm-type="send" @confirm="btnComment" :border="true" />
				</view>
				<view class="ml28 flex_ac">
					<view class="ml26">
						<u-icon @click="btnLike1(0)" name="heart" size="50" v-if="shopData.is_like == 0"></u-icon>
						<u-icon @click="btnLike1(1)" name="heart-fill" size="50" v-if="shopData.is_like == 1"
							color="#FF2A2A"></u-icon>
					</view>
					<view class="c3d f28 ml12">
						{{shopData.likes}}
					</view>
					<view class="ml32" @click="btnfocus">
						<u-icon name="chat" size="50"></u-icon>
					</view>
					<view class="c3d f28 ml12">
						{{shopData.comments}}
					</view>
				</view>
			</view>
		</view>
		<!-- 视频播放弹出框 -->
		<u-popup v-if="popupShow" v-model="popupShow" mode="bottom">

			<view class="popupBox">
				<view class="flex_start goodsBox mt20" v-if="shopData.goods" v-for="(i,l) in shopData.goods" :key="l">
					<view class="" @click="$wanlshop.auth(`/pages/product/goods?id=${shopData.id}`)">
						<image class="goodsImg" :src="$wanlshop.oss(i.image)" mode="">
						</image>
					</view>
					<view class="c3d ml24 flex1" @click="$wanlshop.auth(`/pages/product/goods?id=${shopData.id}`)">
						<view class="overflow_2">
							{{i.title}}
						</view>
						<view class="error tar fb">
							￥{{i.price}}
						</view>
					</view>

				</view>
				<view class="ml32 flex1 tar closeIcon">
					<u-icon name="close" size="32" @click="popupShow = false"></u-icon>
				</view>
				<scroll-view :scroll-y="true" class="scoll-viewS flex1 mt12" @scrolltolower="scrolltolower"
					lower-threshold="300" scroll="scroll" style="touch-action: none;">
					<view class="mt24 f32 c6 fb tac">
						共{{shopData.comments}}条评论
					</view>

					<view class="commentsBox mt20">
						<view class="mb20" v-for="(item,iIndex) in commentsData" :key="iIndex">
							<view class="">
								<view class="flex_start">
									<image class="img" :src="$wanlshop.oss(item.user.avatar) " mode=""></image>
									<view class="f24 flex1 ml20">
										<view class="info">
											{{item.user.nickname}}
										</view>
										<view class="c3 f14">
											{{item.content}}
										</view>
										<view class="info f20">
											{{item.createtime_text}} {{item.city}}
											<text class="c3 ml8" @click="btnHH(item.id)"> 回复</text>
										</view>
									</view>
									<view class="ml32 flex_yy_center mt20">
										<u-icon @click="btnLike(item.id,iIndex,1,'father')" name="heart-fill"
											color="#FF2A2A" v-if="item.is_like == 1"></u-icon>
										<u-icon @click="btnLike(item.id,iIndex,0,'father')" name="heart"
											v-if="item.is_like == 0"></u-icon>
										<view class="f20 info">
											{{item.likes}}
										</view>
									</view>

								</view>
								<view class="ml55 mt20 mb20" v-for="(data,index1) in item.children" :key="index1">
									<view class="flex_start">
										<image class="img" :src="$wanlshop.oss(data.user.avatar) " mode=""></image>
										<view class="f24 flex1 ml20">
											<view class="info">
												{{data.user.nickname}}
											</view>
											<view class="c3 f14">
												<text class="info f20 mr12" v-if="data.top_nickname">
													回复给&nbsp;{{data.top_nickname}}</text>
												{{data.content}}
											</view>
											<view class="info f20">
												{{data.createtime_text}} {{data.city}}
												<text class="c3 ml8" @click="btnHH(data.id)"> 回复 </text>
											</view>
										</view>
										<view class="ml32 flex_yy_center mt20">
											<u-icon @click="btnLike(data.id,index,1,'son',iIndex)" name="heart-fill"
												color="#FF2A2A" v-if="data.is_like == 1"></u-icon>
											<u-icon @click="btnLike(data.id,index,0,'son',iIndex)" name="heart"
												v-if="data.is_like == 0"></u-icon>
											<view class="f20 info">
												{{data.likes}}
											</view>
										</view>

									</view>

								</view>
							</view>
						</view>
					</view>

					<view class="f24 info tac" v-if="!scrollType">
						没有更多数据了
					</view>
				</scroll-view>

				<view class="flex_ac inputBottom">
					<input class="uniInput" style="width: 100%;" :focus="hfFocus" @blur="hfBlur" v-model="inputValue"
						placeholder="发表你的看法" :border="true" confirm-type="send" @confirm="btnComment">
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				focus1: false,
				hfFocus: false,
				page: 1,
				commentsData: [], // 评论数据
				shopData: {
					likes: 0,
					comments: 0,
					title: '',
					shop: {
						shopname: '',
						avatar: '',
					},
					goods: [{
						image: ''
					}],
				}, //商品数据
				inputValue: '',
				popupShow: false,
				scrollType: true,
				parent_id: '',
				disableTrigger: true, //监听请求是否完成
				address: {},
			}
		},
		async onLoad(data) {
			if (data.id) {
				await this.getList(data.id)
			}

		},
		onShow() {
			this.address = uni.setStorageSync('address')
		},
		methods: {
			//预览图片
			previewImage: function(e, k) {
				let imgData = []
				e.forEach(a => {
					imgData.push(this.$wanlshop.oss(a))
				})

				uni.previewImage({
					longPressActions: true,
					current: k,
					urls: imgData
				});
			},
			scrolltolower() {
				console.log(this.scrollType, this.disableTrigger);
				if (!this.scrollType) {
					return
				}
				if (!this.disableTrigger) {
					return
				}
				this.disableTrigger = false
				this.page++
				this.getComments()
			},
			// 评论数据
			getComments() {
				this.$api.get({
					url: "/contents/getComments",
					data: {
						page: this.page,
						limit: 10,
						id: this.shopData.id
					}
				}).then(res => {
					this.disableTrigger = true
					if (res.data) {
						this.commentsData = this.commentsData.concat(res.data)
						if (res.data.length - 0 != 10) {
							this.scrollType = false
						}
					}
				})
			},
			// 详情数据
			getList(id) {
				this.$api.post({
					url: '/contents/detail',
					data: {
						id: id
					}
				}).then(res => {
					if (res) {
						this.shopData = res
						this.getComments()
					}
				})
			},

			btnfocus() {
				this.popupShow = true
			},
			//回复消息
			btnHH(id, k) {
				this.parent_id = id
				if (k == 1) {
					if (this.focus1 == true) {
						this.focus1 = false
						setTimeout(() => {
							this.focus1 = true

						}, 50)
						return
					}
					this.focus1 = true
					return
				}
				if (this.hfFocus == true) {
					this.hfFocus == false
					setTimeout(() => {
						this.hfFocus = true
					}, 50)
					return
				}
				this.hfFocus = true
			},
			hfBlur() {
				this.hfFocus = false
			},
			// 外面点赞
			btnLike1(type) {
				this.$api.post({
					url: '/contents/likes',
					data: {
						id: this.shopData.id,
						type: 'contents'
					},
				}).then(res => {
					if (res) {
						if (type == 0) {
							this.shopData.is_like = 1
							this.shopData.likes += 1
						}
						if (type == 1) {
							this.shopData.is_like = 0
							this.shopData.likes -= 1
						}
					}
				})
			},
			// 评论点赞
			btnLike(id, index, type, stauts, fType) {

				this.$api.post({
					url: '/contents/likes',
					data: {
						id: id,
						type: 'comments'
					},
				}).then(res => {
					if (res) {
						if (stauts == 'father') { //父元素点赞
							if (type == 0) { //0 否 1是
								this.commentsData[index].is_like = 1
								this.commentsData[index].likes += 1
							}
							if (type == 1) { //0 否 1是
								this.commentsData[index].is_like = 0
								this.commentsData[index].likes -= 1
							}
						}
						if (stauts == 'son') { //父元素点赞
							if (type == 0) { //0 否 1是
								this.commentsData[fType].children[index].is_like = 1
								this.commentsData[fType].children[index].likes += 1
							}
							if (type == 1) { //0 否 1是
								this.commentsData[fType].children[index].is_like = 0
								this.commentsData[fType].children[index].likes -= 1
							}
						}
					}
				})
			},
			//回复 发表评论
			btnComment() {
				this.$api.post({
					url: '/contents/comment',
					data: {
						id: this.shopData.id,
						content: this.inputValue,
						parent_id: this.parent_id,
						adcode: this.address.ad_info.adcode,
						city: this.address.ad_info.city,
					}
				}).then(res => {
					if (res) {
						this.shopData.comments += 1
						if (res.parent_id) { // 回复第一层
							this.commentsData.forEach((i, k) => {
								if (i.id == res.top_parent_id) {
									this.commentsData[k].children.unshift(res)
								}
							})
						} else { // 发表评论
							this.commentsData.unshift(res)

						}
						this.inputValue = ''
						this.parent_id = ''

						// this.commentsData = []
						// this.page = 1
						// this.getComments()


					}
				})
			},
			// 取消聚焦 隐藏弹出框最上面input

			// 关注
			btnGZ() {
				this.$api.post({
					url: '/contents/setFindUser',
					data: {
						id: this.shopData.user_id
					}
				}).then(rs => {
					this.shopData.follow = !this.shopData.follow
				})
			},
			popupShowTrue() {
				this.popupShow = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-input-placeholder {
		z-index: 2;
		padding: 18rpx 20rpx;
	}

	.uniInput {
		flex: 1;
		border-radius: 40rpx;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		height: 68rpx;
		background: #e1e1e1;
	}

	.inputBox1 {
		background: #e1e1e1;
		padding: 18rpx 20rpx;

		border-radius: 40rpx;
	}

	.topInput {
		padding: 32rpx;
	}

	.ml55 {
		margin-left: 56rpx;
	}

	::v-deep .uni-input-input {
		flex: 1;
		border-radius: 40rpx;
		padding: 18rpx 20rpx;
		box-sizing: border-box;

		background: #e1e1e1;
	}

	input {
		height: 60rpx;
	}

	.commentsBox {
		.img {
			border-radius: 50%;
			width: 40rpx;
			height: 40rpx;
			margin-top: 20rpx;
		}
	}

	.scoll-viewS {
		padding-bottom: 100rpx;
		overflow-y: scroll;
	}

	.recommend {
		height: calc(100vh - 88rpx);
		/* #ifdef MP */
		height: calc(100vh - 20rpx);

		/* #endif */
		.popupBox {
			display: flex;
			flex-direction: column;
			height: 900rpx;
			box-sizing: border-box;
			padding: 24rpx 32rpx 16rpx 32rpx;

			position: relative;

			.closeIcon {
				position: absolute;
				right: 20rpx;
				top: 20rpx
			}

			.inputBottom {
				background: #fff;
				width: 100%;
				box-sizing: border-box;
				position: fixed;
				height: 100rpx;
				bottom: 0rpx;
				z-index: 2;
				left: 0;
				padding: 0 32rpx;
				box-sizing: border-box;

				.inputBottom {
					width: 100%;
				}

				::v-deep .uni-input-input {
					width: 100%;
					border-radius: 40rpx !important;
				}
			}



			.goodsBox {
				padding-bottom: 24rpx;
				border-bottom: 1rpx #ccc solid;
			}


		}

		.gz {
			background: #FF7030;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			padding: 6rpx 28rpx;
		}

		.goodsImg {
			border: 1rpx #ccc dashed;
			border-radius: 10rpx;
			width: 112rpx;
			height: 112rpx;
		}

		.topBox {
			height: 100%;

			.videoBox {
				width: 100%;
				height: calc(100% - 100rpx);

				.videoClass {
					width: 100%;
					height: 100%;
				}

			}

			.bottomBox {
				display: flex;
				height: 100rpx;
				padding: 16rpx 32rpx 16rpx 16rpx;
				align-items: center;
				box-sizing: border-box;

				::v-deep .uni-input-input {
					border-radius: 40rpx !important;
				}

			}

			.dwShop {
				width: 100%;
				box-sizing: border-box;
				position: fixed;
				z-index: 2;
				bottom: 170rpx;
				/* #ifdef MP-WEIXIN */
				bottom: 180rpx;
				/* #endif */
				padding: 32rpx 32rpx;

				.imgAcatar {
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
				}


			}

		}

		.imgBox {

			height: 100%;

			.swiper {
				min-height: 1000rpx;
			}

			.imgSwiper {
				width: 100%;
				height: 1000rpx;
			}

			.bottomBox {
				width: 100%;
				position: fixed;
				bottom: 0;
				background: #fff;
			}
		}
	}

	.bottom {
		width: 100%;
		box-sizing: border-box;
		padding: 16rpx 32rpx;

		.timeCity {
			margin-top: 18rpx;
			padding-bottom: 18rpx;
			border-bottom: 1rpx #ccc solid;
		}

		.shop {
			width: 100%;
			background: #EEEEEE;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			height: 112rpx;
			box-sizing: border-box;
			padding-right: 20rpx;

			.imageAvatar {
				width: 112rpx;
				height: 112rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
		}
	}
</style>